<template>
  <div class="tw-bg-black tw-w-full tw-h-full">
    <div class="tw-h-2/3 tw-grid tw-grid-cols-6 tw-gap-4">
      <div class="tw-m-10 tw-col-span-1 tw-h-full">
        <q-card class="tw-h-full">
          <q-card-section>
            <div class="text-h6">切换任务
            </div>
            
            <q-select outlined v-model="model" :options="options" label="任务选择" />
            <div>
              <span v-if="model === '任务一'">明星效应的影响因素,以及各个因素之间的重要性程度</span>
              <span v-else-if="model === '任务二'">在受到明星效应影响的人中，各个因素对其程度的影响程度</span>
              <span v-else-if="model === '任务三'">受到明星效应的影响人群中其推荐行为</span>

            </div>
            <q-btn
              class="tw-mt-4"
              color="primary"
              label="切换"
              @click="() => {changeTask()}"
            />
          </q-card-section>
          <q-separator dark inset />
          <q-card-section>
            <div>
              <div class="text-h6">
                有效样本数
              </div>
              <div class="text-h5">
                {{ number }}
              </div>
            </div>
            <q-separator dark inset  class="tw-mt-4 tw-mb-4"/>
            
            <div>
              <div class="text-h5">
                字段说明
              </div>
              <div class="tw-overflow-auto">
                <q-expansion-item
                  v-for="(item, index) in label"
                  :key="index"
                  :label="item.name"
                  :dense="true"
                  expand-separator
                  >
                {{ item.desc }}
                </q-expansion-item>
              </div>

            </div>
          </q-card-section>
        </q-card>
      </div>
      <div class="tw-w-full tw-h-full tw-col-span-2 tw-mt-10">
          <div style="min-height: 400;position: relative;margin-top: 10;" class="tw-h-full" id="map" >
            </div>
      </div>
      <div class="tw-w-full tw-h-full  tw-col-span-3 ">
        <div class="tw-w-full tw-h-full tw-pb-0 tw-mt-10" id="map2" >
          </div>  
      </div>
    </div>
    <div class="tw-w-full tw-h-1/3 tw-pt-20">
      <div class="tw-w-full tw-h-full" id="map3">
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Scene, PolygonLayer, LineLayer, PointLayer, Popup } from "@antv/l7";
import { Mapbox, GaodeMap } from "@antv/l7-maps";
import { useQuasar } from 'quasar'
import * as echarts from 'echarts'
const $q = useQuasar()
$q.dark.set(true)
let model = ref('任务一')
let options = ref(['任务一', '任务二', '任务三'])
let number = ref(100)
let scene = ref(null)
let chart1 = ref(null)
let chart2 = ref(null)
let chart = ref(null)
let label = ref([
  {name:'标签名字',desc:"字段说明，1表示XXX，0表示XXX"},
  {name:'标签名字',desc:"字段说明，1表示XXX，0表示XXX"},
  {name:'标签名字',desc:"字段说明，1表示XXX，0表示XXX"},
  {name:'标签名字',desc:"字段说明，1表示XXX，0表示XXX"},
])
let option2 = {
  parallelAxis: [],
  series: {
    type: 'parallel',
    lineStyle: {
      width: 2
    },
    data: []
  }
};

let option = {
    title: {
      text: '特征重要图',
      left: 'center'
    },
    style: {
      width: '100%',
      height: '100%'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      left:20,
      data: []
    },
    series: [
      {
        name: '特征重要性',
        type: 'pie',
        radius: [20, 140],
        center: ['75%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 5
        },
        data: []
      }
    ]
  }; 
let alcode = ref(null)
onMounted(() => {
  scene.value = new Scene({
    id: 'map',
    map: new GaodeMap({
      autoFit: true,
      style: 'dark',
    }),
  })
  

  scene.value.on("loaded", () => {
    fetch(
      "https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json"
    )
      .then(res => res.json())
      .then(data => {
        alcode.value = data
        const data2 = [
          {
            name: '北京市',
            value: 13,
          },
          {
            name: '天津市',
            value: 20,
          },
        ];
        const chinaPolygonLayer = new PolygonLayer({
          id: 'chinaPolygonLayer',
          autoFit: true
        }).source(data, {
          transforms: [
            {
              type: 'join',
              sourceField: 'name', //data1 对应字段名
              targetField: 'name', // data 对应字段名 绑定到的地理数据
              data: data2,
            },
          ],
        }).color("value", [
          "rgb(239,243,255)",
          "rgb(189,215,231)",
          "rgb(107,174,214)",
          "rgb(49,130,189)",
          "rgb(8,81,156)"
        ])
          .shape("fill")
          .style({
            opacity: 1
          })
        chinaPolygonLayer.on('mousemove', e => {
          if (e.feature.properties.value === undefined) {
            e.feature.properties.value = 0
          }
          const popup = new Popup({
            offsets: [0, 0],
            textAnchor: 'top',
            closeButton: false,
            zIndex: 100,
          }).setLnglat(e.lngLat).setHTML(`<span class='tw-text-black'>${e?.feature?.properties.name}: ${e?.feature?.properties?.value}人</span>`);
          scene.value.addPopup(popup);
        });
        scene.value.addLayer(chinaPolygonLayer);

      })
  });
  let Fetchdata = fetch('http://localhost:8000/dim1').then(res=>res.json()).then(data=>{
  number.value = data.data_size[0]
  return data 
})
// dark mode 

  chart.value = echarts.init(document.getElementById('map2'), 'dark',{
  });

  Fetchdata.then((data)=>{
    let values = data['importance']
    let labels = data['label']
    // convert value ,label to object array
    let data2 = []
    for (let i = 0; i < values.length; i++) {
      data2.push({value:values[i],name:labels[i]})
    }
    let d =     fetch(
      // 'https://gw.alipayobjects.com/os/bmw-prod/1981b358-28d8-4a2f-9c74-a857d5925ef1.json' //  获取行政区划P噢利用
      "https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json"
    )
      .then(res => res.json()).then(aldata=>{
        let layer = scene.value.getLayers()[0]
        layer.setData(aldata, {
          transforms: [
            {
              type: 'join',
              sourceField: 'name', //data1 对应字段名
              targetField: 'name', // data 对应字段名 绑定到的地理数据
              data: data['province'],
            },
          ],
        })
      })
    option.legend.data = labels
    option.series[0].data = data2
    let axis = data.origin_label 
    let data3 = data.origin_data
    option2.parallelAxis = axis
    option2.series.data = data3
    chart2.value = echarts.init(document.getElementById('map3', 'dark'))
    
    chart2.value.setOption(option2)
    chart.value.setOption(option)
  })
})
let changeTask = ()=>{
  let task = model.value

  if(task === '任务一'){
    console.log('任务1')
    fetch('http://localhost:8000/dim1').then(res=>res.json()).then(data=>{
      number.value = data.data_size[0]
      return data 
    }).then((data)=>{
      let values = data['importance']
      let labels = data['label']
      // convert value ,label to object array
      let data2 = []
      for (let i = 0; i < values.length; i++) {
        data2.push({value:values[i],name:labels[i]})
      }
      let d =     fetch(
        // 'https://gw.alipayobjects.com/os/bmw-prod/1981b358-28d8-4a2f-9c74-a857d5925ef1.json' //  获取行政区划P噢利用
        "https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json"
      )
        .then(res => res.json()).then(aldata=>{
          let layer = scene.value.getLayers()[0]
          layer.setData(aldata, {
            transforms: [
              {
                type: 'join',
                sourceField: 'name', //data1 对应字段名
                targetField: 'name', // data 对应字段名 绑定到的地理数据
                data: data['province'],
              },
            ],
          })
        })
      option.legend.data = labels
      option.series[0].data = data2
      let axis = data.origin_label 
      let data3 = data.origin_data
      option2.parallelAxis = axis
      option2.series.data = data3
      chart2.value = echarts.init(document.getElementById('map3', 'dark'))
      
      chart2.value.setOption(option2)
      chart.value.setOption(option)
    })
  }else if(model.value === '任务二'){
    console.log('任务2')
    fetch('http://localhost:8000/dim2').then(res=>res.json()).then(data=>{
      number.value = data.data_size[0]
      return data 
    }).then((data)=>{
      let values = data['importance']
      let labels = data['label']
      // convert value ,label to object array
      let data2 = []
      for (let i = 0; i < values.length; i++) {
        data2.push({value:values[i],name:labels[i]})
      }
      let d =     fetch(
        // 'https://gw.alipayobjects.com/os/bmw-prod/1981b358-28d8-4a2f-9c74-a857d5925ef1.json' //  获取行政区划P噢利用
        "https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json"
      )
        .then(res => res.json()).then(aldata=>{
          let layer = scene.value.getLayers()[0]
          layer.setData(aldata, {
            transforms: [
              {
                type: 'join',
                sourceField: 'name', //data1 对应字段名
                targetField: 'name', // data 对应字段名 绑定到的地理数据
                data: data['province'],
              },
            ],
          })
        })
      option.legend.data = labels
      option.series[0].data = data2
      let axis = data.origin_label 
      let data3 = data.origin_data
      option2.parallelAxis = axis
      option2.series.data = data3
      chart2.value = echarts.init(document.getElementById('map3', 'dark'))
      
      chart2.value.setOption(option2)
      chart.value.setOption(option)
    })
  }else if(model.value === '任务三'){
    fetch('http://localhost:8000/dim3').then(res=>res.json()).then(data=>{
      number.value = data.data_size[0]
      return data 
    }).then((data)=>{
      let values = data['importance']
      let labels = data['label']
      let data2 = []
      for (let i = 0; i < values.length; i++) {
        data2.push({value:values[i],name:labels[i]})
      }
      let d =     fetch(
        "https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json"
      )
        .then(res => res.json()).then(aldata=>{
          let layer = scene.value.getLayers()[0]
          layer.setData(aldata, {
            transforms: [
              {
                type: 'join',
                sourceField: 'name', //data1 对应字段名
                targetField: 'name', // data 对应字段名 绑定到的地理数据
                data: data['province'],
              },
            ],
          })
        })
      option.legend.data = labels
      option.series[0].data = data2
      let axis = data.origin_label 
      let data3 = data.origin_data
      option2.parallelAxis = axis
      option2.series.data = data3
      chart2.value = echarts.init(document.getElementById('map3', 'dark'))
      
      chart2.value.setOption(option2)
      chart.value.setOption(option)
    })
  }
}

</script>
